/**
 * 企业级空状态组件
 * 用于列表、搜索等无数据时的友好提示
 */
import Button from './Button'

export default function EmptyState({
  icon = '📦',
  title = '暂无数据',
  description = '这里还没有任何内容',
  action = null,
  actionText = '开始使用',
  onAction = null,
  size = 'md', // sm, md, lg
  className = ''
}) {
  
  const sizes = {
    sm: {
      icon: 'text-4xl',
      title: 'text-base',
      description: 'text-xs',
      container: 'py-8'
    },
    md: {
      icon: 'text-6xl',
      title: 'text-xl',
      description: 'text-sm',
      container: 'py-12'
    },
    lg: {
      icon: 'text-8xl',
      title: 'text-2xl',
      description: 'text-base',
      container: 'py-16'
    }
  }
  
  const sizeStyles = sizes[size] || sizes.md
  
  return (
    <div className={`flex flex-col items-center justify-center text-center ${sizeStyles.container} ${className}`}>
      {/* 图标 */}
      <div className={`${sizeStyles.icon} mb-4 animate-float`}>
        {icon}
      </div>
      
      {/* 标题 */}
      <h3 className={`${sizeStyles.title} font-bold text-white mb-2`}>
        {title}
      </h3>
      
      {/* 描述 */}
      <p className={`${sizeStyles.description} text-gray-400 max-w-md mb-6`}>
        {description}
      </p>
      
      {/* 操作按钮 */}
      {(action || onAction) && (
        <div>
          {action || (
            <Button
              variant="primary"
              size="lg"
              onClick={onAction}
              icon={
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
              }
            >
              {actionText}
            </Button>
          )}
        </div>
      )}
    </div>
  )
}

